
<template>
   <el-card shadow="never" class="border-1">
    <div id="myEcharts" style=" width: 100%; height: 300px "></div>
   </el-card>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, reactive } from "vue";
import { getDashboardPVStatisticsInfo } from '@/api/admin/dashboard'
import { toRaw } from "@vue/reactivity";

let myEcharts = echarts;
let pvData = reactive({})
onMounted(() => {
  getDashboardPVStatisticsInfo().then((e) => {
    if (e.success) {
      pvData = e.data;
      // console.log(toRaw(pvData.value.pvDates));
      // console.log(toRaw(pvData.value.pvCounts));
       initChart();
    }
  })
 
});

onUnmounted(() => {
  myEcharts.dispose;
});

function initChart() {
  let echart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
  echart.setOption({
    title: {
      text: "一周访问量统计",
      left: "center",
    },
    xAxis: {
      type: "category",
      data: pvData.pvDates,
    },
    tooltip: {
      trigger: "axis"
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: pvData.pvCounts,
        type: "line",
       
       
      }
    ]
  });
  // 为窗口加上宽度变化事件，当宽高发生改变时，调用echarts的resize()方法，调整图表尺寸
  window.addEventListener('resize', function () {
    echart.resize();
  })
}

</script>

